<template>
  <div class="nav">
    <el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect">
      <el-menu-item index="/product">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">功能</template>
        <el-menu-item index="2-1">精品源码</el-menu-item>
        <el-menu-item index="2-2">资源分享</el-menu-item>
        <el-menu-item index="2-3">软件下载</el-menu-item>
      </el-submenu>
      <el-menu-item index="/chat">ChatGpt3.5</el-menu-item>
      <el-menu-item index="/user/individual">个人中心</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      this.toPage(index)
    },
    toPage(router){
      if (this.$route.path !== router) {
        this.$router.replace({
          path: router,
        })
      }

    }
  }
}
</script>

<style >
.nav {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #3b3a3a;
  display: flex;
  justify-content: center;
}

.nav .el-menu {
  background-color: #525252;
  border: none;
}

.nav .el-menu-item,
.el-submenu__title {
  font-size: 16px;
  color: #333;
}

.nav .el-menu-item:hover,
.el-submenu__title:hover {
  color: #409EFF;
}
</style>
